<template>
	<view>
		<tt-bar leftIcon="icon-back" title="购物车">
			<template v-slot:rightCnt>
				<view style="display: flex;justify-content: flex-end;">
					<text class="opText" v-if="!isEdit" @tap="toggleEdit">管理</text>
					<text class="opText" v-if="isEdit" @tap="toggleEdit">完成</text>
				</view>
			</template>
		</tt-bar>
		<scroll-view scroll-y="true" class="scRoll" :style="{'height':scHeight+'px'}">
			<view class="carList">
				<block v-for="(itm,index) in carList.items" :key="index">
					<carGood :goodInfo="itm" :index="index" :isManage="isEdit" :key="index"></carGood>
				</block>
				<emptyBox v-if="carList.items<1"></emptyBox>
			</view>
		</scroll-view>
		<view class="btmPrice">
			<!-- <view class="selectBox" v-if="isEdit">
				<text class="iconfont" :class="[quanxuan?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']" @tap="selectAll"></text>
				<text>全选</text>
			</view> -->
			<view class="priceBox">
				<text v-if="!isEdit">预约金合计:</text>
				<text class="price" v-if="!isEdit">￥{{allPrice.toFixed(2)}}</text>
				<button v-if="!isEdit" @tap="jiesuan">结算({{count}})</button>
				
				<button class="clearBtn" v-if="isEdit" @tap="clearGood">清除失效</button>
				<button class="clearBtn" v-if="isEdit" @tap="removeAdd">移至关注</button>
				<button v-if="isEdit" @tap="deleteGood">删除</button>

			</view>
		</view>
		<hk-modal ref="hkModal"></hk-modal>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import carGood from "@/pagesA/components/carGood/carGood.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar,
			carGood,
			emptyBox
		},
		computed: {
			...mapState({
				// carList: stata => stata.car.carList,
				userInfo: state => state.user.userInfo
			}),
		},
		data() {
			return {
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(190),
				allPrice: 0,
				count: 0,
				quanxuan: false,
				isEdit: false,
				carList: []

			};
		},
		methods: {
			getData() {
				this.$store.dispatch("apiGetCarList", {
					userId: this.userInfo.userId
				}).then(res => {
					this.carList = res.data.data
					// console.log(res);
				})
			},
			// 全选处理
			selectAll() {
				if (this.quanxuan) { //非全选
					this.$store.commit("selectAll", false);
					uni.$emit("selectAll", {
						selectAll: false
					});
					this.count = 0
					this.allPrice = 0
				} else { //全选
					this.$store.commit("selectAll", true);
					uni.$emit("selectAll", {
						selectAll: true
					});
					this.getPrice();
				}
				this.quanxuan = !this.quanxuan
			},
			// 计算价格和数量
			getPrice() {
				let _all = 0,
					_count = 0;
				this.carList.items.forEach((itm, i) => {
					if (itm.isSelect) {
						_all = _all + (parseFloat(itm.prepay) * parseInt(itm.num))
						_count = _count + parseInt(itm.num)
					}

				})
				this.allPrice = _all;
				this.count = _count;
			},
			toggleEdit() {
				this.isEdit = !this.isEdit
			},
			async deleteGood() {
				if (this.count == 0) {
					uni.showToast({
						title: '请选择要删除的课程',
						icon: 'none'
					});
				} else {
					let _this = this;
					_this.$refs.hkModal.init({
						title: '删除课程',
						cntText: '确认要删除选中的课程吗？',
						confirmFcn: () => {
							uni.showLoading({
								title: '正在删除选中的课程中',
								mask: false
							});
							let r = [];
							_this.carList.items.forEach((x) => {
								if (x.isSelect) {
									_this.$store.dispatch("apiDelectGood", {
										id: x.id
									})
								} else {
									r.push(x)
								}
							})
							_this.carList.items = r;
							// for(let i=0;i<_this.carList.items.length;i++){
							// 	if(_this.carList.items[i].isSelect){
							// 		_this.$store.dispatch("apiDelectGood",{
							// 			id:_this.carList.items[i].id
							// 		})
							// 	}
							// }
							// _this.$store.commit("selectAll",false);
							// uni.$emit("selectAll",{selectAll:false});
							_this.getPrice();
							uni.hideLoading();
						},
						cancleFcn: () => {

						}

					})
					this.$refs.hkModal.show()

				}
			},
			async clearGood() {
				let _this = this;
				_this.$refs.hkModal.init({
					title: '清除失效课程',
					cntText: '确认要清除所有失效的课程吗？',
					confirmFcn: () => {
						uni.showLoading({
							title: '正在清除失效课程中',
							mask: false
						});
						let r = [];
						_this.carList.items.forEach((x) => {
							if (x.running!=1) {
								_this.$store.dispatch("apiDelectGood", {
									id: x.id
								})
							} else {
								r.push(x)
							}
						})
						_this.carList.items = r;
						_this.getPrice();
						uni.hideLoading();
					},
					cancleFcn: () => {

					}

				});
				this.$refs.hkModal.show()

			},
			removeAdd(){
				if (this.count == 0) {
					uni.showToast({
						title: '请选择要移至关注的课程',
						icon: 'none'
					});
				} else {
					let _this = this;
					_this.$refs.hkModal.init({
						title: '移动课程',
						cntText: '确认要移动选中的课程到我的关注吗？',
						confirmFcn: () => {
							uni.showLoading({
								title: '正在移动选中的课程中',
								mask: false
							});
							let r = [];
							_this.carList.items.forEach((x) => {
								if (x.isSelect) {
									_this.$store.dispatch("apiDelectGood", {
										id: x.id
									});
									_this.$store.dispatch("apiFollowGood",{
										userId:_this.userInfo.userId,
										linkId:x.courseId
									})

								} else {
									r.push(x)
								}
							})
							
							_this.carList.items = r;
							// for(let i=0;i<_this.carList.items.length;i++){
							// 	if(_this.carList.items[i].isSelect){
							// 		_this.$store.dispatch("apiDelectGood",{
							// 			id:_this.carList.items[i].id
							// 		})
							// 	}
							// }
							// _this.$store.commit("selectAll",false);
							// uni.$emit("selectAll",{selectAll:false});
							_this.getPrice();
							uni.hideLoading();
						},
						cancleFcn: () => {
				
						}
				
					})
					this.$refs.hkModal.show()
				
				}
			},
			jiesuan() {
				if (this.count == 0) {
					uni.showToast({
						title: '请选择结算的商品',
						icon: 'none'
					});
				} else {
					let r = this.carList.items.filter((x) => {
						return x.isSelect
					});
					uni.setStorage({
						key: 'confirmList',
						data: r,
						complete: () => {
							this.toPage({
								url: 'confirmOrder'
							})
						}
					})
				}
			}

		},
		onLoad() {
			this.getData();
			// 原多选
			// uni.$on("selectGood",(payload)=>{
			// 	this.carList.items.map((x,i)=>{
			// 		if(i==payload.index){
			// 			x.isSelect=!x.isSelect
			// 		}
			// 	})
			// 	this.quanxuan=this.carList.items.every((x)=>{
			// 		return x.isSelect==true
			// 	})
			// 	this.getPrice();
			// })

			uni.$on("selectGood", (payload) => {
				let r = [];
				this.carList.items.forEach((x, i) => {
					if (i == payload.index) {
						x.isSelect = true;
					} else {
						x.isSelect = false;
					}
					r.push(x);
				})
				this.carList.items = r;
				this.getPrice();
			})
			uni.$on("runningGood", (payload) => {
				this.carList.items[payload.index].running = payload.running;
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	// @import "../../common/public.less";

	page {
		background-color: #f5f5f5;
	}

	.scRoll {
		background-color: #f5f5f5;
	}

	.carList {
		padding: 10upx 18upx 0upx 18upx;
		display: flex;
		flex-direction: column;

	}

	.opText {
		font-size: 28upx;
	}

	.btmPrice {
		display: flex;
		align-items: center;
		height: 100upx;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 20upx;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;

		.selectBox {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #848484;
			}

			.iconfont {
				font-size: 44upx;
				color: #c3c3c3;
				margin-right: 16upx;
			}

			.icon-yuanxingxuanzhongfill {
				color: #ffcd11;
			}
		}

		.priceBox {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;

			button {
				margin: 0;
				margin-left: 20upx;
				height: 80upx;
				line-height: 80upx;
				padding: 0 40upx;
				border-radius: 40upx;
				border: none;
				color: #FFFFFF;
				font-size: 32upx;
				font-weight: bold;
				background: linear-gradient(to right, #ff572a, #ff0d3f);
			}

			button:after {
				border: none;
				outline: none;
			}

			.clearBtn {
				box-sizing: border-box;
				border: 4upx solid #999999;
				background: rgba(0, 0, 0, 0);
				color: #999999;
				line-height: 72upx;
			}

			text {
				font-size: 28rpx;
				color: #202932;
			}

			.price {
				font-size: 28rpx;
				font-weight: bold;
				color: #ff3b2b;
			}
		}
	}
</style>
